import i18n from '@/locales'
const common = (el, binding) => {
  // if (!binding.value) {
  //   return
  // }
  const value = binding.value ? binding.value + '' : '0'
  el.onmouseover = (e) => {
    let data = value.toString()
    const length = (data.split('.')[0] || {}).length
    if (length > 3) {
      const obj = {
        4: i18n.t('千+'),
        5: i18n.t('万+'),
        6: i18n.t('0万+'),
        7: i18n.t('百万+'),
        8: i18n.t('千万+'),
        9: i18n.t('亿+'),
        10: i18n.t('十亿+'),
        11: i18n.t('百亿+'),
        12: i18n.t('千亿+'),
        13: i18n.t('万亿+'),
      }
      data = data.slice(0, 1) + obj[length]
    }
    el.style.cursor = 'pointer'
    el.style.position = 'relative'
    const box = document.createElement('div')
    box.setAttribute('id', 'vc-tooltip')
    box.innerHTML = data
    box.style.cssText =
      'background-color:#000;width:100px;font-size:13px; display:block;color:#fff;padding:4px 7px;border-radius:4px;position:absolute;right:-24px;top:22px;z-index:9999'
    box.style.top = e.clientY + 15 + 'px'
    box.style.left = e.clientX + 15 + 'px'
    document.body.appendChild(box)
    box.style.display = 'block'
  }
  el.onmouseout = () => {
    const box = document.getElementById('vc-tooltip')
    box && document.body.removeChild(box)
  }
}
export default {
  componentUpdated(el, binding) {
    // console.log(1, '3123')
    common(el, binding)
    // el.append(box)
  },
  bind(el, binding) {
    common(el, binding)
  },
  unbind() {
    // 找到浮层元素并移除
    const box = document.getElementById('vc-tooltip')
    box && document.body.removeChild(box)
  },
  //   install: function(el, binding) {
  //     console.log(3, '3123')
  //     common(el, binding)
  //   }
  //   bind: function(el, binding) {
  //     console.log(binding, 'bindingbinding')
  //   }
}
